import React, {Component} from 'react';
import {observer, inject} from 'mobx-react'
import {
    Flex,
    Carousel,
    Toast
} from 'antd-mobile';

import PlateKeyboard from './scan/pre/PlateKeyboard.jsx'


/**
 * 车辆操作页面
 * */
@inject('carListStore', 'carOrderStore')
@observer
class CarList extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        initToken(() => {
            console.log("success");
        }, () => {
            console.log("failed");
        });
        this.props.carListStore.loadData();
    }

    render() {
        const {
            carData,
            parkInfo,
            carPay,
            carouselIndex,
            carouselChange,
            selectCar,
            visible,
            index,
            selectInput,
            value,
            selectCallback,
            closeSelect,
            fallback
        } = this.props.carListStore;
        const values = value.slice();
        return (<div style={{
                MozUserSelect: 'none',
                OUserSelect: 'none',
                KhtmlUserSelect: 'none',
                WebkitUserSelect: 'none',
                msUserSelect: 'none',
                userSelect: 'none'
            }}>

                <div style={{backgroundColor: '#FFFFFF', borderBottom: '1px solid #E3E3E3'}}>
                    <Flex style={{paddingLeft: 10, paddingRight: 10}}>
                        <Flex.Item>
                            <div className="title-tips">
                                车余位({parkInfo ? parkInfo.monthCardRemainNum : 0})
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className="title-tips">{commName}</div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className="title-tips">{parkInfo ? parkInfo.parkName : '该小区无停车场'}</div>
                        </Flex.Item>
                    </Flex>
                </div>

                <div style={{
                    width: '100%',
                    marginTop: 10,
                    borderBottom: '1px solid #E3E3E3',
                    borderTop: '1px solid #E3E3E3'
                }}>
                    <div style={{
                        backgroundColor: '#FFFFFF',
                        width: 'auto',
                    }}>
                        <Flex style={{padding: '5px 10px 0 10px'}}>
                            <Flex.Item style={{flex: '2'}}>
                                <div className={index === 0 || index === 1 ? "input-lattice select" : "input-lattice"}>
                                    <div style={{
                                        width: '100%',
                                        height: '100%',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center'
                                    }} onClick={() => selectInput(0)}>{values[0]}
                                    </div>
                                    <hr className="hr-vertical"/>
                                    <div style={{
                                        width: '100%',
                                        height: '100%',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center'
                                    }} onClick={() => selectInput(1)}>{values[1]}
                                    </div>
                                </div>
                            </Flex.Item>
                            <Flex.Item style={{flex: '0.1'}}>
                                <div style={{
                                    width: '100%',
                                    height: '10vw',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    fontSize: '8px',
                                    marginLeft: '1.5px',
                                    color: '#D4D3D8'
                                }}>●
                                </div>
                            </Flex.Item>
                            <Flex.Item>
                                <div onClick={() => selectInput(2)}
                                     className={index === 2 ? "input-lattice select" : "input-lattice"}>{values[2]}</div>
                            </Flex.Item>
                            <Flex.Item>
                                <div onClick={() => selectInput(3)}
                                     className={index === 3 ? "input-lattice select" : "input-lattice"}>{values[3]}</div>
                            </Flex.Item>
                            <Flex.Item>
                                <div onClick={() => selectInput(4)}
                                     className={index === 4 ? "input-lattice select" : "input-lattice"}>{values[4]}</div>
                            </Flex.Item>
                            <Flex.Item>
                                <div onClick={() => selectInput(5)}
                                     className={index === 5 ? "input-lattice select" : "input-lattice"}>{values[5]}</div>
                            </Flex.Item>
                            <Flex.Item>
                                <div onClick={() => selectInput(6)}
                                     className={index === 6 ? "input-lattice select" : "input-lattice"}>{values[6]}</div>
                            </Flex.Item>
                            <Flex.Item>
                                <div onClick={() => selectInput(7)}
                                     className={index === 7 ? "input-lattice select new-border" : "input-lattice new-border"}>
                                    {values[7] ? values[7] :
                                        <img src="/pages/mobile/car/scan/pre/ioc_new_energy.png"
                                             style={{width: '100%'}}/>}
                                </div>
                            </Flex.Item>
                        </Flex>

                        <hr color="#EAEAEA" size={1}/>

                        <Flex style={{padding: '0 0 5px 0'}}>
                            <Flex.Item>
                                <li style={{textAlign: 'center', listStyle: 'none', clear: 'none'}}
                                    onClick={() => carPay(this.props)}>
                                    <img className="button-img" src="/pages/mobile/car/image/btn_card_pay.png"/>
                                    <span style={{fontSize: 13, color: '#B4B4B4'}}>月卡缴费</span>
                                </li>
                            </Flex.Item>
                            <Flex.Item>
                                <li style={{textAlign: 'center', listStyle: 'none', clear: 'none'}}
                                    onClick={() => Toast.info('暂未开放，尽请期待!', 1)}>
                                    <img className="button-img" src="/pages/mobile/car/image/btn_temp_pay.png"/>
                                    <span style={{fontSize: 13, color: '#B4B4B4'}}>临停缴费</span>
                                </li>
                            </Flex.Item>
                            <Flex.Item>
                                <li style={{textAlign: 'center', listStyle: 'none', clear: 'none'}}
                                    onClick={() => Toast.info('暂未开放，尽请期待!', 1)}>
                                    <img className="button-img" src="/pages/mobile/car/image/btn_in_car.png"/>
                                    <span style={{fontSize: 13, color: '#B4B4B4'}}>预约进场</span>
                                </li>
                            </Flex.Item>
                            <Flex.Item>
                                <li style={{textAlign: 'center', listStyle: 'none', clear: 'none'}}
                                    onClick={() => Toast.info('暂未开放，尽请期待!', 1)}>
                                    <img className="button-img" src="/pages/mobile/car/image/btn_move_car.png"/>
                                    <span style={{fontSize: 13, color: '#B4B4B4'}}>一键挪车</span>
                                </li>
                            </Flex.Item>
                        </Flex>
                    </div>
                </div>

                {carData.slice().length > 0 ? <div className="slider-outer">
                    <Carousel
                        dots={false}
                        autoplay={false}
                        infinite
                        selectedIndex={carouselIndex}
                        afterChange={index => carouselChange(index)}
                    >
                        {carData.slice().map(val => (
                            <div key={val.id} className="car-info" onClick={() => selectCar(val)}>
                                <img style={{height: 70, marginLeft: 50}}
                                     src="/pages/mobile/car/image/car.png"/>
                                <div style={{marginLeft: 10}}>
                                    <div style={{
                                        color: '#5E5E5E',
                                        fontSize: 17,
                                        fontWeight: 'bold'
                                    }}>{val.plateNumber}</div>
                                    <div style={{
                                        color: '#ADADAD',
                                        fontSize: 15,
                                        marginTop: 10
                                    }}>{val.cardType === 1 ? '临时卡' : '月卡'}（{val.eEndTime ? val.eEndTime.split(' ')[0] : ''}）
                                    </div>
                                    <div style={{color: '#ADADAD', fontSize: 15, marginTop: 10}}>暂无法获取车辆位置</div>
                                </div>
                            </div>
                        ))}
                    </Carousel>
                    <div className="btns" onClick={() => carouselChange(carouselIndex - 1)}>
                        <div className="prev" style={{marginLeft: 10}}>‹
                        </div>
                    </div>
                    <div className="btns btns-next" onClick={() => carouselChange(carouselIndex + 1)}>
                        <div className="next" style={{marginRight: 10}}>›
                        </div>
                    </div>
                </div> : ''}

                <PlateKeyboard
                    visible={visible}
                    inputType={index}
                    selectCallback={selectCallback}
                    closeSelect={closeSelect}
                    fallback={fallback}
                    topHeight={this.topHeight}/>

                <style>
                    {
                        `.title-tips {
                          font-size: 13px;
                          text-align: center;
                          height: 50px;
                          line-height: 50px;
                          width: 100%;
                        }

                        .button-img {
                            display: block;
                            margin-top: 0px;
                            height: 35px;
                            margin-right: auto;
                            margin-bottom: 8px;
                            margin-left: auto;
                        }

                        .am-button-pm {
                            font-size: 15px;
                            color: #DF9F4A;
                            background-color: #FFEACF;
                            border-radius: 0px;
                        }

                        .am-button-tp {
                            font-size: 15px;
                            color: #6192D7;
                            background-color: #D7E9FF;
                            border-radius: 0px;
                        }

                        .slider-outer{
                            margin-top: 10px;
                            width: 100%;
                            background-color: #FFFFFF;
                            position: relative;
                            border:0;
                            border-top:1px solid #E3E3E3;
                            border-bottom:1px solid #E3E3E3;
                        }

                        .btns{
                            position: absolute;
                            top: 50%;
                            width: 70px;
                            height: 70px;
                            margin-top: -35px;
                        }

                        .btns-next{
                            right: 0;
                        }

                        .prev,.next{
                            height: 70px;
                            line-height: 70px;
                            text-align: center;
                            color: #B1B1B1;
                            font-size: 30px;
                            cursor: pointer;
                            position: absolute;
                        }
                        .prev{
                            left: 0;
                        }
                        .next{
                            right: 0;
                        }

                        .car-info {
                          font-size: 13px;
                          height: 120px !important;
                          width: 100%;
                          display: -webkit-flex; /* Safari */
                          display: flex;
                          align-items:center;
                        }

                        .input-lattice {
                            width: 100%;
                            height: 10vw;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border: 1.5px solid #EBEBED;
                        }

                        .new-border {
                            border-style: dashed;
                        }

                        .select{
                            border: 1.5px solid #D2AE5E;
                        }

                        .hr-vertical{
                           height: 80%;
                           border: none;
                           border-left: 1.5px solid #EBEBED;
                            -webkit-margin-start: 0em;
                            -webkit-margin-end: 0em;
                        }
                        `
                    }
                </style>
            </div>
        );
    }
}

export default CarList;